<template>
	<view class="main">
		<gui-a-header title="职业测评" bg="transparent"></gui-a-header>
		<view class="warp">
			<view class="header">
				<view class="txt_box">
					<view class="f60 mt40 cfff gui-bold">
						职业测评
					</view>
					<view class="f28 cfff mt20">
						助你找到核心优势与价值
					</view>
				</view>
				<image class="zycp_img" src="@/static/image/zycp_bg.png" mode="widthFix"></image>
			</view>
			<view class="con_box">
				<view class="f26 lineHeight200">
					无论是在职场中还是生活中我们的目光总能被这些自带“聚光灯”特质的人所吸引独特而醒目的个性特征对某些领域或专业了如指掌做事全神贯注、精益求精
					既能把控大局，又能hold住细节善于照顾他人感受......
					这些人一出场，就会令人留下深刻的印象。
				</view>
				<view class="f26 lineHeight200 mt20">
					而你在职场中所展现出的态度与风格是否能够转化成你
					的核心竞争力?你又具有哪些核心的优势和价值?
				</view>
				<view class="f26 lineHeight200 mt20">
					完成职业风格测评
					既可以帮助你找到赢得职场机会的突破
					又可以快速向企业方展示你的风格特点
					实现个人职业道路上的弯道超车
				</view>
			</view>
			<view class="btn_warp mt40">
				<button class="saveBtn" @tap="msgShow">开始测评</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	const $u = reactive(inject('$u'))
	
	const msgShow = () => {
		$u.msg("每年不定时进行开放，请留意徐州残疾人就业平台小程序及徐州市残疾人就业服务公众号测评功能开放时间", 3000)
		// $u.to(`/pages/index/evaluation/answer`)
	}
</script>

<style lang="scss">
	page,
	.main {
		width: 750rpx;
		height: 100%;
		background: linear-gradient(180deg, #0034C7 0%, #4072FE 100%);
	}
	
	.header {
		box-sizing: border-box;
		position: relative;
		height: 320rpx;
		padding: 70rpx 40rpx 0 40rpx;
	}
	
	.zycp_img {
		position: absolute;
		right: 30rpx;
		bottom: 0;
		width: 310rpx;
	}
	
	.con_box {
		width: 672rpx;
		min-height: 714rpx;
		background: #F5F7FC;
		box-shadow: 0px 3 6rpx 1rpx rgba(0,0,0,0.16);
		border-radius: 14rpx;
		margin: 0 auto;
		position: relative;
		top: -10rpx;
		box-sizing: border-box;
		padding: 58rpx 38rpx;
		color: #4072FE;
		
		.lineHeight200 {
			line-height: 200%;
		}
	}
	
	.saveBtn {
		width: 672rpx;
		background: #0034C7;
		font-size: 30rpx;
	}
</style>